import { CSSProperties, ReactNode, useMemo } from "react";
import Taro from "@tarojs/taro";
import { Image, Text, View } from "@tarojs/components";
import { GStyleSheet, DynamicColors } from "@/utils/DarkMode";
import back_icon from "./back.png";

const dstyle = GStyleSheet.create({
  container: {
    position: 'fixed',
    width: '100%',
    display: 'flex',
    alignItems: 'flex-end',
    backgroundColor: DynamicColors.navBarColor,
    zIndex: 2000
  },
  wrapper: {
    flex: 1,
    display: "flex",
    justifyContent: "space-between",
    alignItems: "flex-end",
    width: '100%',
  },
  backWapper: {
    padding: '0 18px 0 4px', display: 'flex', justifyContent: 'center', alignItems: 'center',
    height: '100%'
  },
  title: {
    color: DynamicColors.titleTextColor
  },
  icon: {
    width: "70rpx",
    height: "46rpx",
    padding: '0 30rpx 0px 0px'
  },
  left: {
    flex: '1',
    height: '100%',
    minWidth: '80rpx',
    justifyContent: 'flex-start',
    marginLeft: '10rpx',
  },
  center: {
    display: 'flex',
    flex: 'none',
    height: '100%',
    alignItems: 'center',
    maxWidth: '40%',
    marginRight: 20,
    boxSizing: 'border-box'
  },
  right: {
    minWidth: "80rpx",
    flex: '1',
  },
});

interface IProps {
  title?: string | ReactNode;
  back?: boolean;
  renderRight?: ReactNode;
  style?: CSSProperties;
  backIcon?: string
  reLaunch?: boolean
}

const NavigationBar = ({ title, back, reLaunch, renderRight, style, backIcon }: IProps) => {
  const styles = dstyle.useDynamicStyle();

  // 获取系统信息
  const systemInfo = useMemo(() => {
    return Taro.getSystemInfoSync();
  }, []);
  // 胶囊按钮位置信息
  const menuButtonInfo = useMemo(() => {
    return Taro.getMenuButtonBoundingClientRect();
  }, []);

  const handleBack = () => {
    if (reLaunch) {
      Taro.reLaunch({
        url: '/pages/home/index'
      });
    } else {
      Taro.navigateBack();
    }
  };

  // 导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度
  const navBarHeight =
    (menuButtonInfo.top - (systemInfo.statusBarHeight ?? 0)) * 2 +
    menuButtonInfo.height +
    (systemInfo.statusBarHeight ?? 0);
  // const menuBottom = menuButtonInfo.top - systemInfo.statusBarHeight;
  const menuRight = systemInfo.screenWidth - menuButtonInfo.right;
  // const menuHeight = menuButtonInfo.height;

  return (
    <View style={{ ...styles.container, height: `${navBarHeight}px`, ...style }}>
      <View
        style={{
          ...styles.wrapper,
          height: `${navBarHeight - (systemInfo.statusBarHeight ?? 0)}px`,
          padding: `0 ${menuRight}rpx`,
        }}
      >
        <View style={styles.left} className='centerFlex'>
          {back && (
            <Image
              onClick={handleBack}
              style={styles.icon}
              src={backIcon || back_icon}
              mode='aspectFit'
            />
          )}
          {renderRight}
        </View>
        <View style={styles.center}>
          {(typeof title === 'string') ? <Text style={styles.title} className='ellipsisText'>{title}</Text> : title}
        </View>
        <View style={styles.right}></View>
      </View>
    </View>
  );
};

export default NavigationBar;
